<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			
			/*练习：1圆形 2正三角形
						   思路1:宽高与边框倒角一致*/
			div#circle{
				/*圆*/
				 width: 200px;
				height: 200px;
				border: 1px solid red;
				border-radius:50%; 
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 5px 5px 50px 50px red inset ;
				}
			 
			/*思路2:div#trainle      css中:抓到div【斜线】
				                 左边框:50像素实线红色
				                 右边框:50像素实线黄色
				                 下边框:50像素实线黑色
				          注意:先别加宽高 transparent 透明色*/
			/* div#triangle{
				width:0;
				border-left:50px solid transparent;
				border-right:50px solid transparent;
				border-bottom:50px solid black;
			} */
			/* 两行：倒三角 蓝色 透明度 .3 
			提醒：所有边框：50px solid transparent
			      上边框颜色改成蓝色 0,0,255
			*/
		   div#triangle{
		   	width: 0;
		   	border: 50px solid transparent;
		   	border-top-color: rgba(0, 0, 255, .3);
		   }
				/* outline 边框轮廓 只针对input 元素 */
				input{
					outline: 1px solid red;
				}
				/* 实际应用：通配选择器 去掉轮廓
				 {outline:0;}
				 */
			</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>